{% extends "base.html" %}

{% block styles %}
    <style>
        .video-thumb .ratio {
            border-radius: 5px 5px 0 0;
            min-height: 90px;
        }
        .selected-directory {
            background-color: #f0f0f0;
        }
        .card.video-thumb {
            transition: box-shadow 0.2s;
        }
        .card.video-thumb:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
    </style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h3 class="mb-4">视频管理</h3>
    <div class="row">
        <div class="col-md-3">
            <h5>视频目录</h5>
            <div id="video-dir-list" class="list-group">
                <!-- 目录项通过JS动态填充 -->
            </div>
            <button class="btn btn-primary mt-3 w-100" id="refresh-video-dir">刷新目录</button>
        </div>
        <div class="col-md-9">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 id="current-dir-title"></h5>
                <div>
                    <button id="oneClickUploadVideoBtn" class="btn btn-info me-2">
                        <i class="bi bi-upload me-1"></i>一键上传
                    </button>
                    <button class="btn btn-danger me-2" id="delete-video-dir">删除目录</button>
                    <button class="btn btn-danger" id="clear-all-videos">清空所有</button>
                </div>
            </div>
            <div id="video-list" class="row g-3">
                <!-- 视频缩略图通过JS动态填充 -->
            </div>
            <div class="pagination-container">
                <nav>
                    <ul class="pagination justify-content-center pagination-sm mb-0" id="video-pagination">
                        <!-- 分页通过JS动态填充 -->
                    </ul>
                </nav>
                <div id="video-page-info" class="text-center text-muted small mt-1"></div>
            </div>
        </div>
    </div>

    <!-- 视频预览模态框 -->
    <div class="modal fade" id="videoPreviewModal" tabindex="-1" aria-labelledby="videoPreviewLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="videoPreviewLabel">视频预览</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body text-center">
                    <video id="preview-video" width="90%" controls playsinline style="background:#eee;">
                        Your browser does not support HTML5 video.
                    </video>
                    <div class="mt-2" id="preview-filename"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="/static/css/photos.css">
<script src="/static/js/videos.js"></script>
{% endblock %}
